<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>赛博功德箱 - Cyber Merit Box</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: #0a0a0a;
            color: #fff;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            position: relative;
        }

        /* 背景动画 */
        .bg-animation {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #0a0a0a 25%, #1a0033 50%, #0a0a0a 75%);
            background-size: 400% 400%;
            animation: gradientShift 15s ease infinite;
            z-index: -2;
        }

        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* 网格背景 */
        .grid-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(255, 215, 0, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 215, 0, 0.1) 1px, transparent 1px);
            background-size: 50px 50px;
            z-index: -1;
            animation: gridMove 20s linear infinite;
        }

        @keyframes gridMove {
            0% { transform: translate(0, 0); }
            100% { transform: translate(50px, 50px); }
        }

        /* 主容器 */
        .container {
            text-align: center;
            padding: 40px;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 20px;
            border: 2px solid #ffd700;
            box-shadow: 0 0 50px rgba(255, 215, 0, 0.5);
            position: relative;
            z-index: 10;
            max-width: 500px;
            width: 90%;
        }

        /* 标题 */
        h1 {
            font-size: 2.5em;
            margin-bottom: 20px;
            background: linear-gradient(45deg, #ffd700, #ffed4e, #ffd700);
            background-size: 200% 200%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: shimmer 3s ease-in-out infinite;
            text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
        }

        @keyframes shimmer {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* 功德显示 */
        .merit-display {
            margin: 30px 0;
            position: relative;
        }

        .merit-count {
            font-size: 4em;
            font-weight: bold;
            color: #ffd700;
            text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
            transition: all 0.3s ease;
        }

        .merit-label {
            font-size: 1.2em;
            color: #ccc;
            margin-top: 10px;
        }

        /* 功德按钮 */
        .merit-button {
            background: linear-gradient(45deg, #ffd700, #ffed4e);
            border: none;
            padding: 20px 50px;
            font-size: 1.5em;
            font-weight: bold;
            color: #000;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(255, 215, 0, 0.5);
        }

        .merit-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(255, 215, 0, 0.7);
        }

        .merit-button:active {
            transform: translateY(-1px);
        }

        /* 金光效果 */
        .golden-light {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: radial-gradient(circle, rgba(255, 215, 0, 0.8) 0%, transparent 70%);
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 100;
        }

        @keyframes goldenBurst {
            0% {
                width: 0;
                height: 0;
                opacity: 1;
            }
            100% {
                width: 600px;
                height: 600px;
                opacity: 0;
            }
        }

        /* 粒子效果 */
        .particle {
            position: absolute;
            width: 10px;
            height: 10px;
            background: #ffd700;
            border-radius: 50%;
            pointer-events: none;
            animation: particleFloat 2s ease-out forwards;
        }

        @keyframes particleFloat {
            0% {
                transform: translate(0, 0) scale(1);
                opacity: 1;
            }
            100% {
                transform: translate(var(--x), var(--y)) scale(0);
                opacity: 0;
            }
        }

        /* 功德文字提示 */
        .merit-text {
            position: absolute;
            font-size: 1.5em;
            color: #ffd700;
            font-weight: bold;
            pointer-events: none;
            animation: floatUp 2s ease-out forwards;
            text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
        }

        @keyframes floatUp {
            0% {
                transform: translateY(0);
                opacity: 1;
            }
            100% {
                transform: translateY(-100px);
                opacity: 0;
            }
        }

        /* 历史记录 */
        .history {
            margin-top: 30px;
            max-height: 150px;
            overflow-y: auto;
            padding: 10px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            border: 1px solid rgba(255, 215, 0, 0.3);
        }

        .history-item {
            padding: 5px 0;
            font-size: 0.9em;
            color: #ccc;
            opacity: 0;
            animation: fadeIn 0.5s ease forwards;
        }

        @keyframes fadeIn {
            to { opacity: 1; }
        }

        /* 滚动条样式 */
        .history::-webkit-scrollbar {
            width: 6px;
        }

        .history::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
        }

        .history::-webkit-scrollbar-thumb {
            background: #ffd700;
            border-radius: 3px;
        }

        /* 响应式设计 */
        @media (max-width: 600px) {
            h1 { font-size: 2em; }
            .merit-count { font-size: 3em; }
            .merit-button { padding: 15px 40px; font-size: 1.2em; }
        }
    </style>
</head>
<body>
    <div class="bg-animation"></div>
    <div class="grid-bg"></div>
    
    <div class="container">
        <h1>🙏 赛博功德箱 🙏</h1>
        
        <div class="merit-display">
            <div class="merit-count" id="meritCount">0</div>
            <div class="merit-label">功德值</div>
        </div>
        
        <button class="merit-button" id="meritBtn">
            积累功德
        </button>
        
        <div class="history" id="history">
            <div style="color: #666; text-align: center;">点击按钮开始积累功德...</div>
        </div>
    </div>

    <script>
        let meritCount = 0;
        const meritCountEl = document.getElementById('meritCount');
        const meritBtn = document.getElementById('meritBtn');
        const historyEl = document.getElementById('history');
        const container = document.querySelector('.container');
        
        // 功德文案数组
        const meritTexts = [
            '功德 +1',
            '福报增长',
            '善缘累积',
            '智慧开启',
            '业障消除',
            '福慧双修',
            '因果圆满',
            '菩提增长',
            '慈悲心生',
            '觉悟提升'
        ];
        
        // 点击按钮事件
        meritBtn.addEventListener('click', function(e) {
            // 增加功德值
            meritCount++;
            meritCountEl.textContent = meritCount;
            
            // 功德值动画
            meritCountEl.style.transform = 'scale(1.2)';
            setTimeout(() => {
                meritCountEl.style.transform = 'scale(1)';
            }, 300);
            
            // 创建金光效果
            createGoldenLight(e);
            
            // 创建粒子效果
            createParticles(e);
            
            // 显示功德文字
            showMeritText(e);
            
            // 添加历史记录
            addHistory();
            
            // 按钮反馈
            meritBtn.style.transform = 'scale(0.95)';
            setTimeout(() => {
                meritBtn.style.transform = 'scale(1)';
            }, 100);
        });
        
        // 创建金光效果
        function createGoldenLight(e) {
            const light = document.createElement('div');
            light.className = 'golden-light';
            light.style.left = e.pageX + 'px';
            light.style.top = e.pageY + 'px';
            light.style.animation = 'goldenBurst 1s ease-out forwards';
            document.body.appendChild(light);
            
            setTimeout(() => {
                light.remove();
            }, 1000);
        }
        
        // 创建粒子效果
        function createParticles(e) {
            const particleCount = 20;
            const rect = e.target.getBoundingClientRect();
            const centerX = rect.left + rect.width / 2;
            const centerY = rect.top + rect.height / 2;
            
            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.left = centerX + 'px';
                particle.style.top = centerY + 'px';
                
                const angle = (Math.PI * 2 * i) / particleCount;
                const velocity = 100 + Math.random() * 100;
                const x = Math.cos(angle) * velocity;
                const y = Math.sin(angle) * velocity;
                
                particle.style.setProperty('--x', x + 'px');
                particle.style.setProperty('--y', y + 'px');
                
                document.body.appendChild(particle);
                
                setTimeout(() => {
                    particle.remove();
                }, 2000);
            }
        }
        
        // 显示功德文字
        function showMeritText(e) {
            const text = document.createElement('div');
            text.className = 'merit-text';
            text.textContent = meritTexts[Math.floor(Math.random() * meritTexts.length)];
            text.style.left = e.pageX + 'px';
            text.style.top = e.pageY + 'px';
            document.body.appendChild(text);
            
            setTimeout(() => {
                text.remove();
            }, 2000);
        }
        
        // 添加历史记录
        function addHistory() {
            const time = new Date().toLocaleTimeString('zh-CN');
            const item = document.createElement('div');
            item.className = 'history-item';
            item.textContent = `${time} - 功德值 +1，当前功德：${meritCount}`;
            
            // 如果是第一条记录，清除提示文字
            if (meritCount === 1) {
                historyEl.innerHTML = '';
            }
            
            historyEl.insertBefore(item, historyEl.firstChild);
            
            // 限制历史记录数量
            while (historyEl.children.length > 10) {
                historyEl.removeChild(historyEl.lastChild);
            }
        }
        
        // 键盘快捷键
        document.addEventListener('keydown', function(e) {
            if (e.code === 'Space') {
                e.preventDefault();
                meritBtn.click();
            }
        });
    </script>
</body>
</html>